<template>
	<view class="container">
		<textarea class="text" v-model="text" placeholder-style="color:#999;height:100px;" placeholder="此刻的心情..." />
		<view class="example-body">
			<imgUpload :max="1" :action="`${uploadUrl}${state}/`" v-model="images" @uploadSuccess="uploadSuccess"
				@uploadFail="uploadFail" @imgDelete="imgDelete" :headers="{'Authorization':token}">

			</imgUpload>
		</view>
		<view class="btn" @click="post">
			发布
		</view>
	</view>

</template>

<script>
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	import imgUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	export default {
		data() {
			return {
				text: '',
				images: [],
				token: `Bearer ${uni.getStorageSync('auth')}`,

				state: 3,
				uploadUrl: url.upload
			};
		},
		components: {
			imgUpload: imgUpload
		},
		methods: {
			uploadSuccess(res) {
				if (res.statusCode === 200) {
					const result = JSON.parse(res.data)
					this.images.push(result.data)
					console.log(result)
				}
			},
			uploadFail(e) {
				uni.showToast({
					title: '错误',
					text: '上传图片失败'
				})
			},
			imgDelete(e) {
				this.images = []
			},
			post() {
				request(url.postTreeHole, 'POST', {
					words: this.text,
					images: this.images?.[0] || ''
				}).then(res => {
					console.log(res)
					if (res.status === 200) {
						uni.showToast({
							title: '发布成功'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					} else {
						uni.showToast({
							icon: 'error',
							title: '发布失败，请稍后重试'
						})
					}
				})
			}
		}
	}
</script>

<style>
	uni-page-body {
		background-color: #fff !important;
	}
</style>
<style lang="less">
	* {
		box-sizing: border-box;
	}

	.container {
		padding: 18px;
		width: 100%;

		.text {
			height: 100px;
		}
	}

	.btn {
		margin: auto;
		margin-top: 40px;
		width: 100%;
		height: 35px;
		background: #FC9380;
		border-radius: 5px;
		font-size: 17px;
		color: #FFFFFF;
		line-height: 23px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
